সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ

নিচে যে সুন্দর একটি এইচটিএমএল ফর্মটি দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

kt_satt_skill_example_id=1003

ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা

ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য width প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=1005

উপরের উদাহরণটি সব ধরনের width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃ

• input[type=text] - শুধুমাত্র টেক্সট ফিল্ডকে সিলেক্ট করে।
• input[type=submit] - শুধুমাত্র সাবমিট ফিল্ডকে সিলেক্ট করে।
• input[type=number] - শুধুমাত্র নাম্বার ফিল্ডেকে সিলেক্ট করে।

ইনপুট ফিল্ডে প্যাডিং যুক্ত করা

টেক্সট ফিল্ড এর ভেতরের চারপাশে ফাকা জায়গা যুক্ত করার জন্য padding প্রোপার্টি ব্যবহার করতে হয়।।

টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1007

উপরের উদাহরণে লক্ষ্য করলে দেখবেন box-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।

box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।

ইনপুট ফিল্ডে বর্ডার যুক্ত করা

বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1010

আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে border-bottom প্রোপার্টিটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1035

ইনপুট ফিল্ডে কালার যুক্ত করা

ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1036

ইনপুট ফিল্ডকে ফোকাস করা

যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।

ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1037

kt_satt_skill_example_id=1038

ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা

ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করেছি।

kt_satt_skill_example_id=1041

সার্চ ইনপুটে এনিমেশন যুক্ত করা

ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।

kt_satt_skill_example_id=1042

টেক্সট এরিয়াকে স্টাইল করা

টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।

kt_satt_skill_example_id=1048

সিলেক্ট মেনুকে স্টাইল স্টাইল করা

kt_satt_skill_example_id=1050

ইনপুট বাটন স্টাইল করা

kt_satt_skill_example_id=1053

সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন।